<template>
    <div :class="[position, 'wl-container']">
        <slot></slot>
    </div>
</template>

<script>
export default {
    props: {
        /** 对齐, 左、中、右 */
        align: {
            type: String,
            default: "left"
        },
        /** 列数 */
        columnNum: {
            type: String,
            default: ""
        }
    },

    computed: {
        position() {
            switch (this.align) {
                case "left":
                    return "wl-left-flex";

                case "right":
                    return "wl-right-flex";
                default:
                    return "wl-center-flex";
            }
        },

        column() {
            if (this.columnNum !== "") {
                return "wl-column-" + this.columnNum;
            } else {
                return "";
            }
        }
    }
};
</script>

